<template>
  <div>
    <van-nav-bar title="评分" left-arrow @click-left="fan" />
    <div class="title">
      <img src="../assets/Shipment/订单信息-服务评价.png" width="15" alt="" />
      <span>订单信息</span>
    </div>
    <div class="title-top">
      <ul>
        <li>
          <div>商品</div>
          <span>{{prodName}}</span>
        </li>
        <li>
          <div>发货时间</div>
          <span>{{sendTime}}</span>
        </li>
        <li>
          <div>到达时间</div>
          <span>{{receiveTime}}</span>
        </li>
      </ul>
    </div>
    <div class="title">
      <img src="../assets/Shipment/订单信息-服务评价.png" width="15" alt="" />
      <span>服务评价</span>
    </div>
    <div class="title-bottom">
      <ul>
        <li>
          <div>描述相符</div>
          <van-rate
            v-model="prodConformityPoint"
            :size="25"
            color="#ffcf60"
            void-icon="star"
            void-color="#eee"
          />
        </li>
        <li>
          <div>物流速度</div>
          <van-rate
            v-model="logisticsSpeedPoint"
            :size="25"
            color="#ff8d5b"
            void-icon="star"
            void-color="#eee"
          />
        </li>
        <li>
          <div>服务质量</div>
          <van-rate
            v-model="serviceQualityPoint"
            :size="25"
            color="#ff5d5e"
            void-icon="star"
            void-color="#eee"
          />
        </li>
      </ul>
    </div>
    <div style="position: relative">
      <textarea
        rows="4"
        class="textarea"
        onfocus="document.getElementById('note').style.display='none'"
        onblur="if(value=='')document.getElementById('note').style.display='block'"
        v-model="comment"
      ></textarea>
      <div id="note" class="note" >
        <font color="#777" v-if="!ifshow=='false'"
          >请填写评价</font
        >
      </div>
    </div>
    <button class="btn" @click="tijao" v-if="ifshow=='true'">提交评论</button>
  </div>
</template>

<script>
import {Evaluate,OrderInfo,OrderList3} from '../request/api'
export default {
  data() {
    return {
      //商品
      prodName:'',
      //发货时间
      sendTime:'',
      //到达时间
      receiveTime:'',
      //商品描述相符评分
      prodConformityPoint: 3,
      //物流速度评分 
      logisticsSpeedPoint:2,
      // 服务质量评分
      serviceQualityPoint: 1,
      // 评价描述
      comment:'',
      //订单号
      serialNo:'',
      //隐藏按钮
      ifshow:"true",
    };
  },
  created(){
    this.serialNo = this.$route.query.serialNo;
    this.ifshow = this.$route.query.ifshow;
   if(this.ifshow=='false'){
      OrderInfo({
      serialNo:this.serialNo
    }).then(res=>{
      this.prodName=res.data.prodName
      this.sendTime=res.data.sendTime
      this.receiveTime=res.data.receiveTime
      this.prodConformityPoint=res.data.prodConformityPoint
      this.logisticsSpeedPoint=res.data.logisticsSpeedPoint
      this.serviceQualityPoint=res.data.serviceQualityPoint
      this.comment=res.data.comment
      return
    })
   }else{
     OrderList3({
     }).then(res=>{
       let Arr=res.data.records.filter(item=>this.serialNo==item.serialNo)
       this.prodName=Arr[0].prodName
       this.sendTime=Arr[0].orderTime
       this.receiveTime=Arr[0].orderTime
     })
   }
  },
  methods:{
      fan(){
          this.$router.push("/shipment");
      },
      tijao(){
        Evaluate({
          serialNo:this.serialNo,
           //商品描述相符评分
          prodConformityPoint:this.prodConformityPoint,
          // 物流速度评分
          logisticsSpeedPoint:this.logisticsSpeedPoint,
          // 服务质量评分
          serviceQualityPoint:this.serviceQualityPoint,
          // 评价描述
          comment:this.comment,
          //订单号
          serialNo:this.serialNo
        }).then(res=>{
        })
      }
  }
};
</script>
 
<style lang = "less" scoped>
/deep/ .van-nav-bar__content {
  background: #003399;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-icon {
    color: #fff;
  }
}
.title {
  background-color: #f5fafe;
  color: #003398;
  padding: 15px 10px;
  display: flex;
  align-items: center;
  img {
    margin-right: 10px;
  }
}
.title-top {
  background-color: #fff;
  margin-bottom: 10px;
  ul {
    li {
      display: flex;
      align-items: center;
      padding: 10px;
      div {
        width: 64px;
        margin-right: 25px;
        color: #999;
      }
    }
  }
}
.title-bottom {
  background-color: #fff;
  ul {
    li {
      display: flex;
      align-items: center;
      padding: 10px;
      div {
        margin-right: 50px;
      }
    }
  }
}

.textarea {
  border: 0;
  resize: none;
  width: 100%;
  background-color: #fff;
  height: 200px;
  position: relative;
  margin-top: 10px;
  box-sizing: border-box;
}
.note {
  position: absolute;
  top: 0;
  line-height: 20px;
  padding: 14px 5px;
}
.btn{
    border: 0;
    background-color: #003399;
    width: 90%;
    height: 45px;
    margin: 10px 17px 0;
    border-radius: 60px;
    color: #fff;
}
</style>